<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-07 15:05:21
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-17 13:15:52
-->
<template>
  <div style="width: 100%; height: 100%">
    <div id="leftColumn" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");
require("echarts/lib/chart/bar");
var charts = {};
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.init();
    //根据浏览器宽度变化改变可视化报表图宽高
    window.addEventListener("resize", () => {
      charts.resize();
    });
  },
  methods: {
    init() {
      charts = echarts.init(document.getElementById("leftColumn"));
      charts.setOption({
        title: {
          text: "周达成率",
          left: "center",
          textStyle: {
            color: "#06f1ef",
            fontSize: "14px",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLine: {
            show: false,
            lineStyle: {
              color: "#06f1ef",
            },
          },
        },
        yAxis: {
          type: "category",
          data: ["第一周", "第二周", "第三周", "第四周"],
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#06f1ef",
            },
          },
        },
        series: [
          {
            color: "#5E9EDB",
            name: "2011年",
            type: "bar",
            data: [195, 200, 156, 123],
            label: {
              show: true, // 开启显示
              position: "insideRight", // 在上方显示
              verticalAlign: "middle",
              textStyle: {
                // 数值样式
                color: "white",
                fontSize: 12,
                fontWeight: "bold",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
